# SYNTAX TEST "source.slint" "Example code test"

  import { DemoPalette, PageX as Page } from "common.slint";
# ^^^^^^ keyword.other.import.slint
#          ^^^^^^^^^^^ entity.name.type.import-list.slint
#                             ^^ keyword.other.as.slint
#                                            ^^^^^^^^^^^^^^ string.quoted.double.import-path.slint

  // re-export
# ^^^^^^^^^^^^ comment.line.double-slash.slint
  export { PrinterQueue, PrinterSettings, Foo as Bar }
# ^^^^^^ keyword.other.export.slint
#                                         ^^^ entity.name.type.export-list.slint
#                                             ^^ keyword.other.as.slint
#                                                ^^^ entity.name.type.export-list.slint

  /* Block comment */
# ^^^^^^^^^^^^^^^^^^^ comment.block.slint
  struct InkLevel {
# ^^^^^^ keyword.declaration.struct.slint
#        ^^^^^^^^ entity.name.type.struct.slint
      color: color,
#     ^^^^^ variable.other.struct.field.slint
#            ^^^^^ entity.name.type.struct.field.slint
      level: percent,
#     ^^^^^ variable.other.struct.field.slint
#            ^^^^^^^ entity.name.type.struct.field.slint
  }

  export global Globus {
# ^^^^^^ keyword.other.export.slint
#        ^^^^^^ keyword.other.global.slint
#               ^^^^^^ entity.name.type.global.slint
  }

  component SideBarIcon inherits Rectangle {
# ^^^^^^^^^ keyword.other.component.slint
#           ^^^^^^^^^^^ entity.name.type.component.slint
#                       ^^^^^^^^ keyword.other.inherits.slint
#                                ^^^^^^^^^ entity.other.inherited-class.component.slint

      in-out property <bool> active;
#     ^^^^^^ keyword.other.visibility.slint
#            ^^^^^^^^ keyword.other.property.slint
#                      ^^^^ entity.name.type.property.slint
#                            ^^^^^^ variable.other.property.slint

      pure callback activate;
#     ^^^^ keyword.other.pure.slint
#          ^^^^^^^^ keyword.other.function.slint
#                   ^^^^^^^^ entity.name.function.slint

      width: DemoPalette.side-bar-width;
#     ^^^^^ variable.other.property.slint
      height: 72px;
#     ^^^^^^ variable.other.property.slint
#             ^^^^ constant.numeric.slint

      states [
#     ^^^^^^ keyword.other.states.slint
          expanded when root.expanded : {
#                  ^^^^ keyword.other.when.slint
              height: layout.min-height;

              in {
#             ^^ keyword.other.state-change.slint
                  animate height { duration: 200rem; easing: ease; }
#                 ^^^^^^^ keyword.other.animate.slint
#                         ^^^^^^ variable.other.property.slint
#                                  ^^^^^^^^ keyword.other.animate.setting.slint
#                                            ^^^^^^ constant.numeric.slint
#                                                    ^^^^^^ keyword.other.animate.setting.slint
#                                                            ^^^^ variable.language.scoped-name.slint
              }
              out {
#             ^^^ keyword.other.state-change.slint
              }
          }
      ]

      if false:id:=Rectangle {
#     ^^ keyword.control.conditional-element.slint
#        ^^^^^ constant.language.boolean.slint
#              ^^ entity.name.tag.element-id.slint
#                  ^^^^^^^^^ entity.name.type.element.slint
          i := Image {
#         ^ entity.name.tag.element-id.slint
#           ^^ punctuation.assignment.element-id.slint
#              ^^^^^ entity.name.type.element.slint
              colorize: root.active ? DemoPalette.active-page-icon-color : DemoPalette.inactive-page-icon-color;
#             ^^^^^^^^ variable.other.property.slint
              animate colorize { duration: 125ms; }
#             ^^^^^^^ keyword.other.animate.slint
#                                ^^^^^^^^ keyword.other.animate.setting.slint
#                                          ^^^^^ constant.numeric.slint
          }
          clicked => { }
#         ^^^^^^^ entity.name.function.slint
      }


      for page-icon[idx] in [
#     ^^^ keyword.control.repeated-element.slint
          @image-url("images/home.svg"),
#         ^^^^^^^^^^ support.function.macro.slint
#                    ^^^^^^^^^^^^^^^^^ string.quoted.double.slint
      ]: SideBarIcon { }

      if true: Rectangle {
#     ^^ keyword.control.conditional-element.slint
#        ^^^^ constant.language.boolean.slint
#              ^^^^^^^^^ entity.name.type.element.slint
          i := Image {
#         ^ entity.name.tag.element-id.slint
#           ^^ punctuation.assignment.element-id.slint
#              ^^^^^ entity.name.type.element.slint
              colorize: root.active ? DemoPalette.active-page-icon-color : DemoPalette.inactive-page-icon-color;
#             ^^^^^^^^ variable.other.property.slint
              animate colorize { duration: 125ms; }
#             ^^^^^^^ keyword.other.animate.slint
#                                ^^^^^^^^ keyword.other.animate.setting.slint
#                                          ^^^^^ constant.numeric.slint
          }
          clicked => { root.activate(); }
#         ^^^^^^^ entity.name.function.slint
      }

  }

